<template>
  <div>
    <!-- 检索区域 -->
    <el-form ref="query" label-width="80px" :inline="true">
      <el-form-item label="用户名:">
        <el-input v-model="table.search.userName" class="wid-250"></el-input>
      </el-form-item>
      <el-button type="primary" @click="handlerSearch">查询</el-button>
      <el-button type="success" @click="openAddUser">新增</el-button>
    </el-form>
    <!-- 列表数据 -->
    <DataTable ref="dataTable" @buttonEvent="buttonEvent" :columns="table.columns" :apiUrl="table.apiUrl" :search="table.search"
      :buttonGroup="table.buttonGroup" :width="500"></DataTable>

    <!-- 新增用户 -->
    <addUserComponent v-if="addUserVisible" :dialogVisible="addUserVisible" :editRegionIdSelect="editRegionIdSelect" @closeAddUser="closeAddUser"
      @successAddUser="handlerSearch"></addUserComponent>

    <!-- 编辑用户 -->
    <editUserComponent v-if="editUserVisible" :userModel="userModel" :editdialogVisible="editUserVisible"
      @closeEditUser="closeEditUser" @successEditUser="handlerSearch">
    </editUserComponent>

    <!-- 修改密码 -->
    <updatePasswordComponent v-if="passwordVisible" :userModel="userModel" :passwordVisible="passwordVisible"
      @closePassword="closePassword">
    </updatePasswordComponent>

  </div>
</template>

<script>
  import DataTable from "@/components/DataTable.vue";
  import addUserComponent from "../user/add.vue";
  import editUserComponent from "../user/edit.vue";
  import updatePasswordComponent from "../user/updatePassword.vue";


  export default {
    components: {
      DataTable,
      addUserComponent,
      editUserComponent,
      updatePasswordComponent
    },
    name: "articleList",
    data() {
      return {
        table: {
          columns: [{
              title: "用户名",
              key: "username"
            },
            {
              title: "姓名",
              key: "realname"
            },
            {
              title: "电话",
              key: "phonenum"
            },
            {
              title: "创建时间",
              key: "creationtime"
            }, {
              title: "邮箱",
              key: "email"
            }
          ],
          apiUrl: "/api/User/getList",
          search: {
            userName: ""
          },
          buttonGroup: [{
              name: "编辑",
              type: "success",
              icon: "",
              incident: "openEditUser"
            },
            {
              name: "修改密码",
              type: "primary",
              icon: "",
              incident: "openPassword"
            },
            {
              name: "删除",
              type: "danger",
              icon: "",
              incident: "handleDelete"
            }
          ]
        },
        addUserVisible: false,
        editUserVisible: false,
        passwordVisible: false,
        userModel: {}

      };
    },

    created() {

    },

    mounted() {},
    methods: {
      buttonEvent(incident, index, row) {
        this[incident](index, row);
      },

      //检索
      handlerSearch: function() {
        this.$refs.dataTable.initload();
      },

      //删除
      handleDelete(index, row) {
        this.$confirm(
          "此操作将永久删除用户 " + row.username + ", 是否继续?",
          "提示", {
            type: "warning"
          }
        ).then(() => {
          this.$api.post("/api/User/delete", {
            userId: row.id
          }).then(rsp => {
            if (rsp != false) {
              this.handlerSearch();
            }
          });
        });
      },

      openAddUser: function() {
        this.addUserVisible = true;
      },

      closeAddUser: function() {
        this.addUserVisible = false;
      },

      openEditUser: function(index, row) {
        this.editUserVisible = true;
        this.userModel = row;
      },

      closeEditUser: function() {
        this.editUserVisible = false;
      },
      openPassword: function(index, row) {
        this.passwordVisible = true;
        this.userModel = row;
      },

      closePassword: function() {
        this.passwordVisible = false;
      }
    }
  };
</script>
